import React from 'react';
import _ from 'lodash';
import { Button, message } from 'antd';
import { DeviceCollectionItem } from '@/models/connect';
import styles from './index.css';
import router from 'umi/router';
import { isMenuVisible } from '@/utils/utils';

interface BlockListProps {
  item: DeviceCollectionItem;
  handleEdite: (deviceId: string) => void;
  handleDelete: (deviceId: string) => void;
  deviceListPage: (deviceId: string) => void;
}

const BlockList: React.FC<BlockListProps> = ({
  item,
  handleDelete,
  handleEdite,
  deviceListPage,
}) => {
  return (
    <div
      className={styles.block}
      onClick={() => {router.push(`/device/detail/${item.deviceTypeNo}/${item.deviceId}`)}}
    >
      <div className={styles.info}>
        <img className={styles.img} src={item.mainImage || require('@/assets/yay.jpg')} />
        <ul className={styles.content}>
          <li>
            {item.deviceTypeName}/{item.typeName}
          </li>
          <li>{item.deviceName}</li>
          <li>{item.serialNumber}</li>
          <li>{item.stateCodeStr}</li>
          <li>{item.treeTypeName}</li>
        </ul>
      </div>
      <div className={styles.btn}>
        {isMenuVisible('iot:device:update') && (
          <Button
            className="cst-btn-3"
            onClick={e => {
              e.stopPropagation();
              handleEdite(item.deviceId);
              localStorage.setItem('page', deviceListPage);
            }}
          >
            编辑
          </Button>
        )}
        {isMenuVisible('iot:device:delete') && (
          <Button
            className="cst-btn-3"
            onClick={e => {
              e.stopPropagation();
              handleDelete(item.deviceId);
            }}
          >
            删除
          </Button>
        )}
        {item.remoteControlField && isMenuVisible('iot:device:remote') && (
          <Button
            className="cst-btn-3"
            onClick={e => {
              e.stopPropagation();
              // message.info('此设备不支持远程操控!');
              router.push(`/device/remoteControl/${item.deviceId}`);
              localStorage.setItem('page', deviceListPage);
            }}
          >
            远程操作
          </Button>
        )}
      </div>
    </div>
  );
};

export default BlockList;
